<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/com.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div class="my-head">
        <div class="container">
            <div class="row">
                <div class="col-sm-2 san-fl">
                    <img  class="index-log" src="images/index-logo.png">
                </div>
                <a href="#" class="head-btn to-index">首页</a>
                <a href="#" class="head-btn to-all-course">全部课程</a>
                <div class="col-sm-6 index-hr san-fr">
                    <div class="col-xs-6 index-hr-pd ab-l san-fr">
                        <div class="ver-cen-pad">
                            <button class="btn btn-default login-btn">登录</button>
                            <button class="btn btn-default register-btn">注册</button>
                        </div>
                    </div>
                    <div class="col-xs-6 san-fr">
                        <form class="form-horizontal">
                            <div class="form-group index-hr-pd">
                                <div class="input-group ver-cen-pad san-fr add-margin-r" id="head-input-box">
                                    <label for="index-search" class="sr-only">Search</label>
                                    <input id="index-search" class="form-control" type="text">
                               <!--     <div class="input-group-btn index-search-icon">
                                        <button type="submit" class="btn" >
                                            <img class="search-btn" src="images/search-icon.png"></button>
                                    </div>-->
                                </div>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="jumbotron">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators" id="index-carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"><span>冰雪世界</span></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"><span>探索宇宙</span></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"><span>神奇机械</span></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" id="index-carousel" role="listbox">
                <div class="item active">
                    <img src="images/index-banner.png" alt="">
                </div>
                <div class="item">
                    <img src="images/index-banner.png" alt="">
                </div>
                <div class="item">
                    <img src="images/index-banner.png" alt="">
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            </a>
        </div>
    </div>

    <div class="index-main">
            <div class="course-content clearfix">
                <div class="add-width">
                    <div class="thumbnail">
                        <div class="media-content">
                            <a href="#" class="source-lk"><img src="images/intro-source-f.png"></a>
                        </div>
                        <div class="caption">
                            <h3>设计与发现<br><small>科技学堂精品课程</small></h3>
                            <p>设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。</p>
                            <div class="row add-border">
                                <div class="col-xs-3">
                                    <h4>99.00</h4>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <h4>主讲老师：任老师</h4>
                                </div>
                            </div>
                            <h5>1.1 <设计与发现> 教材简介</h5>
                            <p>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</p>
                            <h5 class="level-2-h">1.2 了解设计流程</h5>
                            <p>设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                            <p class="my-btn-tab1"><a href="#" class="btn btn-default btn-block" role="button">免费领取</a></p>
                        </div>
                    </div>
                </div>
                <div class="add-width">
                    <div class="thumbnail">
                        <div class="media-content">
                            <a href="#" class="source-lk"><img src="images/intro-source-s.png"></a>
                        </div>

                        <div class="caption">
                            <h3>设计与发现<br><small>科技学堂精品课程</small></h3>
                            <p>设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。</p>
                            <div class="row add-border">
                                <div class="col-xs-3">
                                    <h4>99.00</h4>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <h4>主讲老师：任老师</h4>
                                </div>
                            </div>
                            <h5>1.1 <设计与发现> 教材简介</h5>
                            <p>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</p>
                            <h5 class="level-2-h">1.2 了解设计流程</h5>
                            <p>设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                            <p class="my-btn-tab1"><a href="#" class="btn btn-default btn-block" role="button">免费领取</a></p>
                        </div>
                    </div>
                </div>
                <div class="add-width">
                    <div class="thumbnail">
                        <div class="media-content">
                            <a href="#" class="source-lk"><img src="images/intro-source-s.png"></a>
                        </div>
                        <div class="caption">
                            <h3>设计与发现<br><small>科技学堂精品课程</small></h3>
                            <p>设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。</p>
                            <div class="row add-border">
                                <div class="col-xs-3">
                                    <h4>99.00</h4>
                                </div>
                                <div class="col-xs-9 text-right">
                                    <h4>主讲老师：任老师</h4>
                                </div>
                            </div>
                            <h5>1.1 <设计与发现> 教材简介</h5>
                            <p>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</p>
                            <h5 class="level-2-h">1.2 了解设计流程</h5>
                            <p>设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                            <p class="my-btn-tab1"><a href="#" class="btn btn-default btn-block" role="button">免费领取</a></p>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <h4 class="foot-title">联系方式</h4>
                    <ul class="my-list foot-list">
                        <li>朝阳区安立路 101 号院</li>
                        <li><a href="mailto: info@makerclass.cn">info@makerclass.cn</a></li>
                    </ul>
                    <h5 class="foot-title-se"><a class="cooperate-web">中国青少年科技辅导员协会</a> <span>合作网站</span></h5>
                    <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
                </div>
                <div class="col-md-3">
                    <div class="col-xs-10">
                        <img src="images/index-wc-icon.png" height="150px">
                        <a class="back-top" href="#"></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<script>
    $(function () {
      $(".back-top").click(function(){
       
        var evt = window.event || arguments.callee.caller.arguments[0];
        evt.preventDefault();
        _scrollTop(judgeTop());
      
    });
    function _scrollTop(num) {
        if(num == 1) {
             var timer = null;
            timer = setInterval(function () {

                var height = document.documentElement.scrollTop;
                var speed =  document.documentElement.scrollTop/5;
                console.log(height);
                document.documentElement.scrollTop -= speed;
                if(height == 0) {
                    clearInterval(timer);
                }
            },1);
        }
        if(num == 2) {
            var timer = null;
            timer = setInterval(function () {
                var height = document.body.scrollTop;
                var speed =  document.body.scrollTop/5;
                        console.log(height);
                document.body.scrollTop -= speed;
                if(height == 0) {
                    clearInterval(timer);
                }
            });
        }
       
    }
    function judgeTop() {
        if(document.documentElement.scrollTop > 0) {
            return 1
        }
        if(document.body.scrollTop > 0) {
            return 2
        }
    }
    $(window).scroll(function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > 0) {
            $(".back-top").show();
        }
        if(scrollTop == 0) {
            $(".back-top").fadeOut();
        }
    });

    
        $(".med-pl-btn").click(function(){
            $(this).hide();
            var $that = $(this);
            var $media = $(this).next();
            $media.attr("controls","controls");
            var Media = $media[0];
            Media.play();
            var eventTester = function(e){
                Media.addEventListener(e,function(){
                    if(e == "pause") {
                        if($(".video").width() < 300) {
                            $that.show();
                        }
                    }
                    if(e == "play") {
                        $that.hide();
                    }
                });
            }
            eventTester("pause");
            eventTester("play");
        });

    })
</script>
</body>
</html>